<template>
  <div class="course-wp">
    <Header title="我的课程"></Header>
    <section>
      <div class="coreMain">
        <div class="pad_lr272">
          <div class="mar_t181">
            <ul class="coreMainContext">
              <li v-for="(item,index) in list" :key="index" @click="jumpRouterToDetails(item)">
                <div class="coreTop">
                  <div class="coreLeft">
                    <img src="@/assets/img/main/hexinimg.png" alt />
                    <span>{{item.typecid}}</span>
                  </div>
                  <div class="coreRight">
                    <div class="coreRightTitel ellipsis">{{item.name}}</div>
                    <div class="coreRightText ellipsis">重点考点逐一讲解 快速提升</div>
                  </div>
                </div>
                <div class="coreBottom">
                  <div class="coreBottomLeft">
                    <img src="@/assets/img/main/nobody.png" alt />
                    <span class="teacher">{{item.author}}</span>
                    <span class="student">{{item.studyNum}}</span>
                  </div>
                  <div class="price">￥{{item.price}}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <van-empty v-if="!list.length" description="您目前没有报名课程" />
    </section>
  </div>
</template>

<script>
import "@/css/main.css";
import Header from "@/components/Header";
import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
import { Empty } from "vant";
export default {
  data() {
    return {};
  },
  async mounted() {
    await this.SET_UID(this.user.id);
    await this.getCourse();
    // console.log(this.list);
  },
  methods: {
    ...mapMutations("course", ["SET_UID"]),
    ...mapActions("course", ["getCourse"]),
    // 跳转到详情页
    jumpRouterToDetails(form) {
      this.$router.push({
        name: "Datas",
        params: {
          form
        }
      });
    }
  },
  components: {
    Header,
    vanEmpty: Empty
  },
  computed: {
    ...mapGetters(["user"]),
    ...mapState("course", ["list"])
  }
};
</script>

<style scoped src="../.././css/main.css"></style>
<style scoped src="../.././css/main/same.css"></style>
<style scoped src="../.././css/main/main.css"></style>
<style scoped>
.course-wp {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.3rem;
  line-height: 1.5;
  color: #3d4145;
  background: #f7f7f7;
  overflow: hidden;
}
</style>